import { _decorator, Button, instantiate, Node, Prefab } from 'cc';
import { app } from 'db://assets/app/app';
import { watchStore } from 'db://pkg/@gamex/cc-store';
import BaseView from '../../../../../../extensions/app/assets/base/BaseView';
import { InfoItem } from './expansion/InfoItem';
const { ccclass, property } = _decorator;

@ccclass('PageHome')
export class PageHome extends BaseView {
    @property(Prefab)
    infoItem: Prefab;

    @property(Node)
    infoList: Node;

    @property(Node)
    btnList: Node;

    initBtns() {
        this.btnList.children.forEach(btn => {
            btn.on(Button.EventType.CLICK, () => {
                if (btn.name === 'name') {
                    // 随机名字
                    app.store.home.setName(`${Math.random().toString(36).slice(2, 6)}`);
                } else if (btn.name === 'age') {
                    // 增加年龄
                    app.store.home.setAge(app.store.home.age + 1);
                } else if (btn.name === 'map') {
                    // 添加map数据
                    app.store.home.setMap(`key-${app.store.home.map.size}`, Math.floor(Math.random() * 10));
                } else if (btn.name === 'set') {
                    // 添加set数据
                    app.store.home.addSet(app.store.home.set.size);
                } else if (btn.name === 'array') {
                    // 添加array数据
                    app.store.home.pushArray(Math.floor(Math.random() * 100));
                }
            });
        });
    }

    initUI() {
        {
            // app.store.home.name
            const item = instantiate(this.infoItem);
            item.parent = this.infoList;
            item.name = 'name';
        }
        {
            // app.store.home.age
            const item = instantiate(this.infoItem);
            item.parent = this.infoList;
            item.name = 'age';
        }
        {
            // app.store.home.map
            const item = instantiate(this.infoItem);
            item.parent = this.infoList;
            item.name = 'map';
        }
        {
            // app.store.home.set
            const item = instantiate(this.infoItem);
            item.parent = this.infoList;
            item.name = 'set';
        }
        {
            // app.store.home.array
            const item = instantiate(this.infoItem);
            item.parent = this.infoList;
            item.name = 'array';
        }
    }

    updateUI() {
        const store = app.store.home;
        {
            const item = this.infoList.getChildByName('name');
            item.getComponent(InfoItem).setInfo('name', store.name);
        }
        {
            const item = this.infoList.getChildByName('age');
            if (store.age <= 3) {
                item.getComponent(InfoItem).setInfo('age', `${store.age}(幼年期)`);
            } else if (store.age <= 10) {
                item.getComponent(InfoItem).setInfo('age', `${store.age}(儿童)`);
            } else if (store.age <= 18) {
                item.getComponent(InfoItem).setInfo('age', `${store.age}(青少年)`);
            } else {
                item.getComponent(InfoItem).setInfo('age', `${store.age}(成年)`);
            }
        }
        {
            const item = this.infoList.getChildByName('map');
            item.getComponent(InfoItem).setInfo('map', JSON.stringify({
                'szie': store.map.size,
                'get(key-2)': store.map.get('key-2') ?? '不存在'
            }));
        }
        {
            const item = this.infoList.getChildByName('set');
            item.getComponent(InfoItem).setInfo('set', JSON.stringify({
                'szie': store.set.size,
                'has(10)': store.set.has(10) ? '存在' : '不存在'
            }));
        }
        {
            const item = this.infoList.getChildByName('array');
            item.getComponent(InfoItem).setInfo('array', `length:${store.array.length}, [0]:${store.array[0]}, [3]:${store.array[3]}`);
        }
    }

    protected onLoad(): void {
        this.initBtns();

        this.initUI();

        watchStore(this.updateUI, this);
    }
}